{extend name="df/tpl/base" /}

{block name="area_head"}
<style>
  .layui-table-cell{height: auto !important;}
</style>
{/block}

{block name="area_body"}
<fieldset class="layui-elem-field">
  <legend>文章管理</legend>
  <div class="layui-field-box">
    {:html_head_tip('文章基础数据,点击单元格编辑')}
    <div class="layui-btn-group">
      <a href="{:url(CONTROLLER_NAME.'/set')}" class="layui-btn"><i class="layui-icon layui-icon-add-1"></i>添加</a>
      <a data-href="{:url(CONTROLLER_NAME.'/dels')}" data-table="demo" class="layui-btn layui-btn-danger js-ops confirm"><i class="layui-icon layui-icon-delete"></i>批量删除</a>
    </div>
    <table id="demo" lay-filter="fDemo"></table>
  </div>
</fieldset>
<script type="text/html" id="barDemo">
<div class="layui-btn-group">
  <a href="{:url(CONTROLLER_NAME.'/set',[],'')}?id={{ d.id }}" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-edit"></i>编辑</a>
  <a href="{:url(CONTROLLER_NAME.'/auth',[],'')}?id={{ d.id }}" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-set"></i>权限</a>
  <a href="{:url(CONTROLLER_NAME.'/del',[],'')}?id={{ d.id }}" class="layui-btn layui-btn-sm layui-btn-danger ajax-get confirm no-alert"><i class="layui-icon layui-icon-delete"></i>删除</a>
</div>
</script>
<script type="text/html" id="statusTpl">
  <form class="layui-form">
  <input type="checkbox" data-id="{{ d.id }}"
  {{# if(d.status>0){ }} checked  {{#  } }}
  lay-skin="switch" value="1" lay-text="发布|草稿">
  </form>
</script>
<script type="text/html" id="timeTpl">
  {{# if(d.update_time>0){ }}
  {{ new Date((d.update_time)*1000).format('yyyy/MM/dd hh:mm') }}
  {{# } }}
</script>
<script type="text/html" id="imgTpl">
  <img src="{:config('avatar_url')}?uid={{ d.author }}&size=60" layer-src="{:config('avatar_url')}?uid={{ d.author }}"  class="layui-nav-img js-view">  {{ d.author_name }}
</script>
{/block}

{block name="area_foot"}

<!-- script -->
<script>
// page init
layui.use(['rb','table2','form','element'], function(){
  var layer = layui.layer
  ,table = layui.table2
  ,form = layui.form
  ,rb = layui.rb
  ,$ = layui.$;

  rb.log('page','init');
  //执行渲染
  table.render({ elem: '#demo'
    ,url: '{:url(CONTROLLER_NAME."/ajax")}'
    ,where: { sort : 'asc' }
    ,method: 'get'
    ,request: { pageName: 'page',limitName: 'size', }
    ,limits: [10,30]
    ,limit: 10
    ,loading: true
    ,page: true
    ,cols:  [[
      {checkbox: true} //,fixed: 'left',LAY_CHECKED: true
      // ,{field: 'id', title: 'ID', width: 50}//,sort:true,fixed: 'left'
      ,{field: 'title', title: '名称 .', width: 250,edit: 'text'}
      ,{field: 'author', title: '作者', width: 200,templet:"#imgTpl"}
      ,{field: 'excerpt', title: '摘要 .',edit: 'text'}
      ,{field: 'status', title: '状态', width: 100,templet:"#statusTpl"}
      ,{field: 'update_time', title: '上次更新', width: 150,templet: '#timeTpl'}
      ,{align:'left',title: '操作',width:250,toolbar: '#barDemo'} //,fixed: 'right'
    ]]
    ,done: function(res, page, count){
      // 转换数据
      //异步 res为接口返回,直接赋值 res为：{data: [], count: 99}
      // console.log(res);
      // res.data[0].username = 'done-edit';
      // console.log(page,count);
      // res.count = 100;
    }
  });
  // 单选
  form.on('switch', function(data){
    // console.log(data); //elem elem.checked value othis
    var el = data.elem;
    rb.post(el,'{:url(CONTROLLER_NAME."/editOne")}',{ field: 'status',val: el.checked ? 1:0,id:parseInt(el.getAttribute('data-id')) },true);
  });
  // 单元格编辑
  table.on('edit(fDemo)', function(obj){
    // console.log(obj); // value , field ,data
    $.post('{:url(CONTROLLER_NAME."/editOne")}', { field: obj.field,val: obj.value,id:obj.data.id }, function(data){
      rb.ajaxTip(data);
    });
  });

});
</script>
{/block}